import { Subject, Observable, BehaviorSubject } from 'rxjs';

const SubjectDemo = () => {
  // Subject multicast 多播
  const subject$ = new Subject()

  subject$.subscribe(data => console.log(`Subject 第一次订阅: ${data}`))
  subject$.next(1) // Subject 第一次订阅: 1
  subject$.next(2) // Subject 第一次订阅: 2

  // 第二次订阅时，第一次订阅也会收到消息
  subject$.subscribe(data => console.log(`Subject 第二次订阅: ${data}`))
  // Subject 第一次订阅: 3 
  // Subject 第二次订阅: 3
  subject$.next(3)
  // Subject 第一次订阅: 4
  // Subject 第二次订阅: 4
  subject$.next(4)

  subject$.subscribe(data => console.log(`Subject 第三次订阅: ${data}`))
  subject$.complete()

  // Observable unicast 单播
  const observable$ = new Observable(subscriber => {
    console.log('stream 开始')
    subscriber.next(1)
    subscriber.next(2)
    subscriber.next(3)
    subscriber.next(4)
    console.log('stream 结束')
    subscriber.complete()
  })
  observable$.subscribe(data => console.log(`Observable 第一次订阅：${data}`))
  observable$.subscribe(data => console.log(`Observable 第二次订阅：${data}`))

  // BehaviorSubject 第一次订阅的时候，预设初始值触发一次
  const source$ = new BehaviorSubject(0)
  source$.subscribe(data => console.log(`BehaviorSubject 第一次订阅：${data}`))
  source$.next(1)
  source$.next(2)
  // BehaviorSubject 第一次订阅：0
  // BehaviorSubject 第一次订阅：1
  // BehaviorSubject 第一次订阅：2
  
  // 新的订阅进来，立即收到最近一次事件的推送
  source$.subscribe(data => console.log(`BehaviorSubject 第二次订阅：${data}`))
  source$.next(3)
  source$.next(4)
  console.log(`BehaviorSubject 最近一次事件推送数据是：${source$.value}`)
  return (
    <div>
      subject demo
    </div>
  )
}
export default SubjectDemo